<template>
  <div class="vendor">
    <el-form :inline="true" :model="formInline" class="form">
    <el-form-item label="供应商简称" style="width:350px">
      <el-input v-model="formInline.corp" placeholder="请输入" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSearch">查询</el-button>
    </el-form-item>
  </el-form>

  <el-table class="table" :data="tableData.data" style="width: 100%">
    <el-table-column fixed prop="date" label="Date" align="center">
      <template #header>
        <div>报价单号</div>
        <div>供应商简称</div>
      </template>
      <template #default="scope">
        <div>{{ scope.row.BJNO ||'-'}}</div>
        <div>{{ scope.row.corp ||'-'}}</div>
      </template>
    </el-table-column>
    <el-table-column fixed prop="date" label="Date" align="center">
      <template #header>
        <div>费用项目</div>
        <div>计价单位</div>
      </template>
      <template #default="scope">
        <div>{{ scope.row.ITEMCODE ||'-'}}</div>
        <div>{{ scope.row.pricetype ||'-'}}</div>
      </template>
    </el-table-column>
    <el-table-column fixed prop="date" label="Date" align="center">
      <template #header>
        <div>提罐地</div>
        <div>返回地</div>
      </template>
      <template #default="scope">
        <div>{{ scope.row.txplace ||'-'}}</div>
        <div>{{ scope.row.returnplace ||'-'}}</div>
      </template>
    </el-table-column>
    <el-table-column fixed prop="date" label="Date" align="center">
      <template #header>
        <div>装罐地</div>
        <div>卸罐地</div>
      </template>
      <template #default="scope">
        <div>{{ scope.row.loadplace ||'-'}}</div>
        <div>{{ scope.row.displace ||'-'}}</div>
      </template>
    </el-table-column>
    <el-table-column fixed prop="date" label="Date" align="center">
      <template #header>
        <div>运输时间</div>
        <div>危险品</div>
      </template>
      <template #default="scope">
        <div>{{ scope.row.transdays||'-' }}</div>
        <div>{{ scope.row.isdg=='1'?'是':'否' }}</div>
      </template>
    </el-table-column>
    <el-table-column fixed prop="date" label="Date" align="center">
      <template #header>
        <div>单价</div>
        <div>币别</div>
      </template>
      <template #default="scope">
        <div>{{ scope.row.unitprice ||'-'}}</div>
        <div>{{ scope.row.moneytype ||'-'}}</div>
      </template>
    </el-table-column>
    <el-table-column fixed prop="date" label="Date" align="center">
      <template #header>
        <div>净价</div>
        <div>税率</div>
      </template>
      <template #default="scope">
        <div>{{ scope.row.notaxprice ||'-'}}</div>
        <div>{{ scope.row.taxrate ||'-'}}</div>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleClick(scope.row)"
          >选择</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>


<script lang="ts" setup>
import { onMounted, reactive , ref,defineEmits} from 'vue'
import createAxios from '/@/utils/axios'

const emit = defineEmits(['on-vendor-select'])

const formInline = reactive({
  corp: '',
})

const tableData = reactive({
  data:[],
  current:1,
  total:0
})



onMounted(()=>{
  onSearch()
})

const onSearch = () => {
  console.log('submit!')
  createAxios({
      url:'/admin/XBjbody/gys?corp='+formInline.corp,
      method:'get'
  }).then((res:any)=>{
    tableData.data = res.data
    tableData.total = res.data.length
  })
}

const handleClick = (item:object) => {
  emit('on-vendor-select',item)
  // console.log(item)
}
</script>

<style lang="scss" scoped>
.vendor{
  padding: 30px 24px;
  .form{
    margin-bottom: 16px;
  }
}

</style>
